<template>
  <div class="feedback-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>意见反馈</span>
        </div>
      </template>

      <el-form
        ref="feedbackFormRef"
        :model="feedbackForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="反馈内容" prop="content">
          <el-input
            v-model="feedbackForm.content"
            type="textarea"
            :rows="6"
            placeholder="请输入您的反馈内容..."
            maxlength="500"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="上传附件" prop="files">
          <el-upload
            class="upload-demo"
            drag
            :action="uploadUrl"
            :headers="uploadHeaders"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :file-list="feedbackForm.files"
            :multiple="true"
            :limit="5"
            :accept="'.jpg,.jpeg,.png,.mp4,.mov,.avi'"
            :before-upload="beforeUpload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              拖拽文件到此处或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              支持图片和视频格式，最多上传5个文件
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="submitting">
            {{ submitting ? "提交中..." : "提交反馈" }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

const feedbackFormRef = ref(null);
const submitting = ref(false);

// 表单数据
const feedbackForm = reactive({
  content: "",
  files: [],
});

// 表单验证规则
const rules = reactive({
  content: [
    { required: true, message: "请输入反馈内容", trigger: "blur" },
    { min: 5, message: "反馈内容至少需要5个字符", trigger: "blur" },
  ],
  files: [
    {
      validator: (rule, value, callback) => {
        if (value.length === 0) {
          return callback(new Error("请至少上传一个文件"));
        }
        callback();
      },
      trigger: "change",
    },
  ],
});

// 文件上传相关
const uploadUrl = "https://your-api-endpoint.com/upload"; // 替换为实际的上传接口
const uploadHeaders = {
  Authorization: `Bearer ${localStorage.getItem("token") || ""}`,
};

// 上传前的钩子
const beforeUpload = (file) => {
  const isImageOrVideo = file.type.startsWith("image/") || file.type.startsWith("video/");
  if (!isImageOrVideo) {
    ElMessage.error("只能上传图片或视频文件");
    return false;
  }
  return true;
};

// 上传成功回调
const handleUploadSuccess = (response, file) => {
  feedbackForm.files.push({
    name: file.name,
    url: response.url || file.url,
  });
  ElMessage.success("文件上传成功");
};

// 上传失败回调
const handleUploadError = (err) => {
  ElMessage.error(`文件上传失败: ${err.message}`);
};

// 提交表单
const submitForm = () => {
  feedbackFormRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true;

      // 这里可以添加实际的表单提交逻辑
      setTimeout(() => {
        ElMessage.success("反馈提交成功，感谢您的支持！");
        feedbackForm.content = "";
        feedbackForm.files = [];
        submitting.value = false;
      }, 1500);
    } else {
      ElMessage.error("请完善表单信息");
      return false;
    }
  });
};
</script>

<style scoped lang="scss">
.feedback-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload-demo {
  width: 100%;
}
</style>
